.main {
  //课程动画

  .one {
    animation: one 2s ease forwards;
    -moz-animation: one 2s ease forwards; /* Firefox */
    -webkit-animation: one 2s ease forwards; /* Safari 和 Chrome */
    -o-animation: one 2s ease forwards; /* Opera */
  }

  .two {
    animation: two 2s ease forwards;
    -moz-animation: two 2s ease forwards; /* Firefox */
    -webkit-animation: two 2s ease forwards; /* Safari 和 Chrome */
    -o-animation: two 2s ease forwards; /* Opera */
  }

  .three {
    animation: three 2s ease forwards;
    -moz-animation: three 2s ease forwards; /* Firefox */
    -webkit-animation: three 2s ease forwards; /* Safari 和 Chrome */
    -o-animation: three 2s ease forwards; /* Opera */
  }

  .four {
    animation: four 2s ease forwards;
    -moz-animation: four 2s ease forwards; /* Firefox */
    -webkit-animation: four 2s ease forwards; /* Safari 和 Chrome */
    -o-animation: four 2s ease forwards; /* Opera */
  }

  .five {
    animation: five 2s ease forwards;
    -moz-animation: five 2s ease forwards; /* Firefox */
    -webkit-animation: five 2s ease forwards; /* Safari 和 Chrome */
    -o-animation: five 2s ease forwards; /* Opera */
  }

  .opacity {
    animation: opacity 2s ease 2s forwards;
    -moz-animation: opacity 2s ease 2s forwards; /* Firefox */
    -webkit-animation: opacity 2s ease 2s forwards; /* Safari 和 Chrome */
    -o-animation: opacity 2s ease 2s forwards; /* Opera */
  }

  @keyframes one {
    from {
      height: 0;
    }
    to {
      height: 384px;
    }
  }

  @keyframes two {
    from {
      height: 0;
    }
    to {
      height: 413px;
    }
  }

  @keyframes three {
    from {
      height: 0;
    }
    to {
      height: 444px;
    }
  }

  @keyframes four {
    from {
      height: 0;
    }
    to {
      height: 479px;
    }
  }

  @keyframes five {
    from {
      height: 0;
    }
    to {
      height: 514px;
    }
  }

  //课程动画End
  .barTitle {
    .title1 {
      color: #3e3e3f;
      font-size: 36px;
      line-height: 54px;
      font-weight: normal;
      margin-bottom: 20px;
      text-align: center;
    }
    .line {
      width: 42px;
      height: 6px;
      border-radius: 3px;
      background-color: #ffd000;
      margin: 0 auto 12px;
    }
  }
  .bar1 {
    width: 100%;
    height: 600px;
    background: url(../img/index/b1.jpg) no-repeat center;
    background-size: 100% 100%;
    overflow: hidden;
    .content {
      display: flex;
      justify-content: space-between;
      height: 600px;
      .person {
        width: 762px;
        height: 485px;
        margin-top: 124px;
      }
      .myForm {
        width: 346px;
        //height: 442px;
        background-color: #fff;
        border-radius: 6px;
        margin-top: 54px;
        padding-bottom:20px;
        .formTit {
          padding-top: 40px;
          img {
            display: block;
            margin: 0 auto 20px;
          }
          p {
            font-size: 22px;
            color: #0a0902;
            text-align: center;
            margin-bottom: 20px;
            span {
              color: #ff5a21;
            }
          }
        }
        .formBody {
          width: 276px;
          margin: 0 auto;
          p {
            margin-bottom: 10px;
            input {
              width: 276px;
              height: 48px;
              box-sizing: border-box;
              border-radius: 24px;
              color: #515151;
              font-size: 16px;
              padding-left: 53px;
              background-color: #fff;
              border: 1px solid #cccccc;
            }
            .name {
              background: url(../img/index/i1.png) no-repeat scroll 22px center;
              background-size: 14px 17px;
            }
            .mobile {
              background: url(../img/index/i2.png) no-repeat scroll 22px center;
              background-size: 13px 19px;
            }
            select {
              width: 122px;
              height: 48px;
              box-sizing: border-box;
              border-radius: 24px;
              color: #515151;
              font-size: 16px;
              padding-left: 25px;
              background-color: #fff;
              border: 1px solid #cccccc;
              outline: none;
              cursor: pointer;
            }
            //select图标
            select {
              /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
              //border: solid 1px #000;

              /*很关键：将默认的select选择框样式清除*/
              appearance: none;
              -moz-appearance: none;
              -webkit-appearance: none;

              /*在选择框的最右侧中间显示小箭头图片*/
              background: url(../img/index/arrow.png) no-repeat scroll 86px center #fff;
              background-size: 8px 6px;

              /*为下拉小箭头留出一点位置，避免被文字覆盖*/
              padding-right: 14px;
            }

            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand {
              display: none;
            }
            input::-webkit-input-placeholder { /* WebKit browsers*/
              color: #aaa;
              font-size: 16px;
            }

            input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
              color: #aaa;
              font-size: 16px;
            }

            input::-moz-placeholder { /* Mozilla Firefox 19+*/
              color: #aaa;
              font-size: 16px;
            }

            input:-ms-input-placeholder { /* Internet Explorer 10+*/
              color: #aaa;
              font-size: 16px;
            }
          }
          p.error{
            display: none;
            color: #F21E1E;
            font-size: 14px;
            padding-left: 14px;
            margin-top: -5px;
          }
        }
        .submit {
          display: block;
          width: 290px;
          margin: 0 auto;
          height: 58px;
          line-height: 56px;
          background: url("../img/index/btnBg.png") no-repeat center;
          background-size: 100% 100%;
          text-align: center;
          font-size: 20px;
          color: #1d1820;
          letter-spacing: 1px;
          cursor: pointer;
          margin-top: 20px;
        }
        .disabled {
          background-color: #fbd542;
          cursor: default;
        }
        .read {
          text-align: center;
          font-size: 12px;
          color: #aaa;
          margin-top: 25px;
          a {
            color: #63799F;
          }

        }
      }
    }
  }
  .bar2 {
    .bar2Title {
      text-align: center;
      font-size: 36px;
      color: #3e3e3f;
      margin: 94px 0 50px;
    }
    .bar2Body {
      li:first-child {
        margin-left: 0px;
      }
      li {
        float: left;
        margin-left: 20px;
        width: 285px;
        img {
          display: block;
          width: 100%;
        }
        p {
          text-align: center;
          font-size: 22px;
          color: #1d1820;
          margin-top: 48px;
          margin-bottom: 120px;
          .num60{
            font-size: 12px;
            vertical-align: -1px;
          }
        }
      }
    }
  }
  .bar3 {
    background-color: #fdfcfa;
    padding: 74px 0 120px;
    .bar3Body {
      height: 606px;
      background: url(../img/index/map.png) no-repeat 419px center;
      .bar3Left {
        padding: 156px 0 0 32px;
        p {
          font-size: 24px;
          color: #666666;
          line-height: 40px;
          margin-bottom: 38px;
        }
        button {
          width: 290px;
          height: 68px;
          line-height: 68px;
          background: url("../img/index/btnBg.png") no-repeat center;
          text-align: center;
          font-size: 20px;
          color: #1d1820;
          letter-spacing: 1px;
        }
      }
    }
  }
  .bar4 {
    padding-top: 100px;
    .bar4Body {
      margin-top: 60px;
      width: 996px;
      li {
        float: left;
        width: 480px;
        margin-bottom: 76px;
        div {
          display: block;
          margin-bottom: 18px;
          cursor: pointer;
          overflow: hidden;
          width: 480px;
          height: 330px;
          box-shadow: 0px 3px 8px 1px rgba(122, 120, 111, 0.18);
          border-radius: 6px;
          img {
            display: block;
            margin-bottom: 18px;
            cursor: pointer;
            width: 480px;
            height: 330px;
            transform: scale(1.01);
          }
          img {
            transition: all 1s;
            -webkit-transition: all 1s;
          }
        }
        p:nth-child(2) {
          font-size: 24px;
          color: #1d1820;
          margin-left: 6px;
          margin-bottom: 8px;
        }
        p:nth-child(3) {
          font-size: 14px;
          color: #666;
          margin-left: 6px;
        }
        &:hover {
          img {
            transform: scale(1.08);
          }
        }
      }
      li:nth-child(2n) {
        margin-left: 36px;
      }
    }
  }
  .bar5 {
    padding: 80px 0 124px;
    background-color: #fffafa;
    .bar5Body {
      .myWinter {
        margin-top: 80px;
        //选择年级
        .winterTit {
          #winterTab {
            border-radius: 5px;
            border: 1px solid #fcc225;
            text-align: center;
            display: inline-block;
            position: relative;
            left: 50%;
            overflow: hidden;
            li:first-child {
              border-left: none;
            }
            li {
              width: 170px;
              float: left;
              height: 48px;
              line-height: 48px;
              border-left: 1px solid #fcc225;
              font-size: 18px;
              a {
                border: 0;
                cursor: pointer;
                text-decoration: none;
              }
              &.active {
                a, a:hover, a:focus {
                  background-color: #f5b70e;
                  color: #fff;
                  border-radius: 0;
                }
              }
              a {
                display: inline-block;
                color: #f5b70e;
                line-height: 48px;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        //选择科目
        #winterContent {
          margin-top: 44px;
          ul {
            border-radius: 5px;
            border: 1px solid #fcc225;
            text-align: center;
            display: inline-block;
            position: relative;
            left: 50%;
            overflow: hidden;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            li:first-child {
              border-left: none;
            }
            li {
              width: 105px;
              float: left;
              height: 40px;
              line-height: 40px;
              border-left: 1px solid #fcc225;
              font-size: 18px;
              a {
                border: 0;
                cursor: pointer;
                text-decoration: none;
              }
              &.active {
                a, a:hover, a:focus {
                  background-color: #f5b70e;
                  color: #fff;
                  border-radius: 0;
                }
              }
              a {
                display: inline-block;
                color: #f5b70e;
                line-height: 40px;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        //选择的内容
        #winterAll {
          h1 {
            padding: 0;
          }
          >ul {
            margin-top: 24px;
            position: relative;
            height: 540px;
            li {
              bottom: 0px;
              position: absolute;
              float: left;
              width: 235px;
              height: 480px;
              vertical-align: bottom;
              overflow: hidden;
              margin-right: 6px;
              color: #fff;
              border-radius: 4px;
              .txtHead {
                position: relative;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                div {
                  position: absolute;
                  z-index: 1;
                  top: 50%;
                  left: 50%;
                  h1 {
                    font-size: 36px;
                    font-weight: normal;
                    margin: 0;
                    color: #fff;
                  }
                  h2 {
                    font-size: 22px;
                    font-weight: normal;
                    margin: 0;
                    color: #fff;
                  }
                }
              }
              .txtBody {
                height: 276px;
                margin-top: 5px;
                position: relative;
                p{
                  position: absolute;
                  z-index: 1;
                  //top: 66px;
                  top: 52px;
                  left: 50%;
                  font-size: 14px;
                  line-height: 30px;
                  color: #FFF;
                  max-width: 200px;
                  white-space: nowrap;
                }
              }
            }
            li:first-child {
              height: 384px;
              left: 0px;
              .txtHead {
                height: 103px;
              }
              div {
                background-color: #fa6540;
              }
            }
            li:nth-child(2) {
              height: 413px;
              left: 241px;
              .txtHead {
                height: 132px;
              }
              div {
                background-color: #fcc225;
              }
            }
            li:nth-child(3) {
              height: 444px;
              left: 482px;
              .txtHead {
                height: 163px;
              }
              div {
                background-color: #38ccf0;
              }
            }
            li:nth-child(4) {
              height: 479px;
              left: 723px;
              .txtHead {
                height: 198px;
              }
              div {
                background-color: #653dff;
              }
            }
            li:nth-child(5) {
              height: 514px;
              left: 964px;
              .txtHead {
                height: 233px;
              }
              div {
                background-color: #18d47b;
              }
              margin-right: 0;
            }
            //& li:nth-child(1) {
            //  color: #737373;
            //  left: 70px;
            //  div {
            //    height: 219px;
            //    p {
            //      height: 164px;
            //    }
            //  }
            //}
            //& li:nth-child(2) {
            //  color: #737373;
            //  left: 286px;
            //  div {
            //    height: 270px;
            //    p {
            //      height: 164px;
            //    }
            //  }
            //}
            //& li:nth-child(3) {
            //  color: #737373;
            //  left: 499px;
            //  div {
            //    height: 319px;
            //    p {
            //      height: 164px;
            //    }
            //  }
            //}
            //& li:nth-child(4) {
            //  color: #737373;
            //  left: 713px;
            //  div {
            //    height: 372px;
            //    p {
            //      height: 164px;
            //    }
            //  }
            //}
            //& li:nth-child(5) {
            //  color: #737373;
            //  left: 926px;
            //  div {
            //    height: 424px;
            //    p {
            //      height: 164px;
            //    }
            //  }
            //}
          }
        }
      }
    }
  }
  .bar6 {
    padding: 120px 0;
    .bar6Body {
      margin-top: 70px;
      padding: 0 125px;
      li {
        float: left;
        width: 204px;
        img {
          display: block;
          margin: 0 auto 28px;
        }
        p:nth-child(2) {
          text-align: center;
          font-size: 20px;
          color: #666666;
        }
        p:nth-child(3) {
          font-size: 14px;
          color: #999;
          line-height: 24px;
        }
      }
      li:nth-child(2) {
        margin: 0 169px;
      }
    }
  }
  .bar7 {
    padding: 80px 0;
    background-color: #fdfcfa;
    .bar6Body {
      margin-top: 70px;
      padding: 0 125px;
      li {
        float: left;
        width: 210px;
        img {
          display: block;
          margin: 0 auto 10px;
        }
        p:nth-child(2) {
          text-align: center;
          font-size: 14px;
          color: #666666;
        }
      }
      li:nth-child(2) {
        margin: 0 158px;
      }
    }
  }
}
